<template>
	<view class="main">
		<view class="topbar">
			<text class="back" @tap="goback"> < </text>
			<text>支付详情</text>
		</view>
		<view class="order-block">
			<div class="orderId">订单编号: <span>{{orderId}}</span></div>
			<div class="total">订单金额: <span>{{total}} 元</span></div>
		</view>
		<view class="choose-block">
			<div class="title">选择支付方式</div>
			<div class="content">
				<div class="pay-list">
					<radio-group @change="radioChange">
						<label class="row">
							<div class="left">
								<image src="../../../static/icons/alipay.png"></image>
							</div>
							<div class="ways">支付宝支付</div>
							<div class="right">
								<radio :value="way" checked="true" />
							</div>			
						</label>
						<label class="row">
							<div class="left">
								<image src="../../../static/icons/wxpay.png"></image>
							</div>
							<div class="ways">微信支付</div>
							<div class="right">
								<radio :value="way"/>
							</div>			
						</label>
					</radio-group>
				</div>
			</div>
			<div class="paynow">
				<div class="btn" @tap="paynow">立即支付</div>
				<div class="tis">
					点击立即支付，即代表您同意 <span>《条款协议》</span>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import { payConfirm } from '../../../api/order/order.js'
	export default {
		data() {
			return {
				orderId:'',
				total:0,
				way:'0'
			}
		},
		onLoad(option) {
			var params = JSON.parse(uni.getStorageSync('params'))
			this.orderId = params.orderId
			this.total = params.total
		},
		methods:{
			paynow(){
				// uni.setStorageSync('money',this.total)
				uni.showLoading({
				    title: '支付中',
				});
				setTimeout(function(){
					uni.navigateTo({
					   url:`/pages/mine/order/payS` 
					});
				},1500);			
				payConfirm({
					userId:'bdecbb72264e4ec581061d4770a2e914',
					orderId:this.orderId,
					payType:this.way == '0'? 'alipay':'wxpay'
				}).then(res=>{
					console.log(res)
				})
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			radioChange(e){
				// console.log(e)
				this.way = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.topbar{
				position: fixed;
				left: 0;
				top: 0;
				background-color: #354e44;
				color: #fff;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 998;
				.back{
					font-size: 24px;
					position: absolute;
					left: 20px;
				}
		}
		
		.order-block {
			font-size: 32rpx;
			color: #494949;
			border-bottom: 1px solid #E5E5E5;
			margin-top: 88rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			div{
				height: 45px;
				line-height: 45px;
				span{
					padding-left: 10px;
					font-size: 32rpx;
					color: #000;
				}
			}
		}
		.choose-block{
			width: 94%;
			padding: 0 3% 20px 3%;
			margin-top: 10px;
			.title{
			    width: 100%;
			    font-size: 17px;
			}
			.content{
				.pay-list{
				    width: 100%;
				    border-bottom: solid 0.5px #eee;
					.row{
						width: 100%;
					    height: 60px;
					    display: -webkit-box;
					    display: -webkit-flex;
					    display: flex;
					    align-items: center;
						.left{
						    width: 50px;
						    flex-shrink: 0;
						    display: flex;
						    align-items: center;
							image{
							    width: 40px;
							    height: 40px;
							    background-color: transparent;
							}
						}
						.ways{
						    width: 100%;
						    font-size: 15px;
						}
					}
				}
			}
		}
		.paynow{
		    margin-top: 10px;
		    width: 100%;
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
			.btn{
			    width: 70%;
			    height: 40px;
			    border-radius: 40px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    color: #fff;
			    background-color: #354E44;
			    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
			}
			.tis{
				margin-top: 5px;
			    width: 100%;
			    font-size: 12px;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    justify-content: center;
			    align-items: baseline;
			    color: #999;
				span{
					color: #5a9ef7;
				}
			}
		}
	}
</style>
